CSS Background Image


« Previous Next »

CSS background-image

The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element.

Example

Set the background image for a page:/p> 

        
        <!DOCTYPE html>
        <html>
        <head> 
        <style> 

        body {
        background-image: url("paper.gif");
          }

        </style> 
        </head> 
        <body> 
      
        <h1>Hello World!</h1>
        <p>This page has an image as the background!</p>


        </body>
        </html>
Result:
Example Image

Example

This example shows a bad combination of text and background image. The text is hardly readable: 

        
        <!DOCTYPE html>
        <html>
        <head> 
        <style> 

        body {
            background-image: url("bgdesert.jpg");
              }
  
        </head> 
        <body> 
      
        <h1>Hello World!</h1>
        <p>This text is not easy to read on this background image.</p>


        </body>
        </html>
Result
Example Image

Example

External styles are defined within the element, inside the section of an HTML page: 

        
          <!DOCTYPE html>
          <html>
          <head> 
          <style> 

          p {
            background-image: url("paper.gif");
          }
    
        </style>     
        </head> 
        <body> 
      
        
        <h1>Hello World!</h1>
        <p>This paragraph has an image as the background!</p>
      
          </body>
          </html>
Result:
Example Image